<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" name="file" id="file" multiple onchange="upload.call(this)">
    <script src="js/jszip.js"></script>
    <script src="js/FileSaver.js"></script>
    <script>
        function getImage(file) {
            return new Promise((resolve, reject) => {
                var fileReader = new FileReader();
                fileReader.readAsDataURL()

            });
        }
        function upload() {
            console.log(this.files);
            var zip = new JSZip();
            var img = zip.folder("images");
            for (let i = 0; i < this.files.length; i++) {
                let f = this.files[i];
                console.log(f);
                img.file(f.name, f);
            }

            zip.generateAsync({ type: "blob" })
                .then(function (content) {
                    // debugger;
                    // let a = document.createElement("a");
                    // a.href = content;
                    // a.download="img.zip";
                    // a.click();
                    saveAs(content, "example.zip");
                });
        }
    </script>
</body>

</html>